<template>
  <div class="table-container">
    <!-- 工单列表部分 -->
    <div class="work-order-section">
      <!-- 标题和搜索框区域 -->
      <div class="table-header">
        <h2 class="table-title">工单列表</h2>
        <div class="search-container">
          <el-input
            v-model="searchProductionNo"
            placeholder="请输入生产单号搜索"
            clearable
            size="small"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button icon="el-icon-search" size="small" @click="handleSearch" />
            </template>
          </el-input>
        </div>
      </div>
      
      <el-table 
        :data="pagedTableData" 
        border 
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        class="custom-table"
        max-height="350"
        v-loading="loading"
        ref="workOrderTable"
        @selection-change="handleWorkOrderSelectionChange"
      >
        <!-- 点选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <el-table-column
          prop="planOrderNo"
          label="计划单号"
          align="center"
        />
        <el-table-column
          prop="productionOrderNo"
          label="生产单号"
          align="center"
        />
        <el-table-column
          prop="feedingBatch"
          label="投料批次"
          align="center"
        />
        <el-table-column
          prop="performance"
          label="性能"
          align="center"
          width="100"
        />
        <el-table-column
          prop="coating"
          label="镀层"
          align="center"
          width="80"
        />
        <!-- <el-table-column
          prop="feedingBatchAgain"
          label="投料批次"
          align="center"
        /> -->
        <el-table-column
          prop="productModel"
          label="产品型号"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="issueWeight"
          label="发料重量"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          min-width="50"
        />
        <el-table-column
          prop="product"
          label="产品"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          min-width="60"
        />
        <el-table-column
          prop="qualityJudgment"
          label="质量判定"
          align="center"
        />
        
        <!-- 操作按钮列 -->
        <el-table-column
          label="操作"
          align="center"
          min-width="160"
        >
          <template #default="scope">
            <el-button 
              size="mini" 
              type="text" 
              icon="el-icon-view"
              @click="handleWorkOrderView(scope.row)"
            >
              查看
            </el-button>
            <el-button 
              size="mini" 
              type="text" 
              icon="el-icon-edit"
              @click="handleQualityInfoEntry(scope.row)"
            >
              质量信息录入
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :prev-text="prevText"
          :next-text="nextText"
          :disabled="loading || total <= pageSize"
          class="pagination"
        />
      </div>
    </div>

    <!-- 质量信息部分 -->
    <div class="quality-info-section">
      <!-- 质量信息标题 -->
      <h2 class="table-title">质量信息</h2>
      
      <el-table 
        :data="pagedQualityData" 
        border 
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        class="custom-table"
        max-height="350"
        v-loading="qualityLoading"
        ref="qualityTable"
        @selection-change="handleQualitySelectionChange"
      >
        <!-- 点选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <el-table-column
          prop="productCode"
          label="产品代码"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="electroplatingNo"
          label="电镀号"
          align="center"
          min-width="100"
        />
        <el-table-column
          prop="beforeChamferDate"
          label="倒角前日期"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="beforeChamferChecker"
          label="倒角前测量人"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="afterChamferDate"
          label="倒角后日期"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="afterChamferChecker"
          label="倒角后测量人"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          width="80"
        />
        <el-table-column
          prop="remarks"
          label="备注"
          align="center"
          min-width="150"
        />
        
        <!-- 操作按钮列 -->
        <el-table-column
          label="操作"
          align="center"
          min-width="180"
        >
          <template #default="scope">
            <el-button 
              size="mini" 
              type="text" 
              icon="el-icon-view"
              @click="handleQualityView(scope.row)"
            >
              查看
            </el-button>
            <el-button 
              size="mini" 
              type="text" 
              icon="el-icon-edit"
              @click="handleQualityEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button 
              size="mini" 
              type="text" 
              icon="el-icon-delete"
              @click="handleQualityDelete(scope.row)"
              style="color: #F56C6C;"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 质量信息分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleQualitySizeChange"
          @current-change="handleQualityCurrentChange"
          :current-page="qualityCurrentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="qualityPageSize"
          :total="qualityTotal"
          layout="total, sizes, prev, pager, next, jumper"
          :prev-text="prevText"
          :next-text="nextText"
          :disabled="qualityLoading || qualityTotal <= qualityPageSize"
          class="pagination"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkOrderTable',
  data() {
    return {
      // 工单列表数据
      tableData: [
        {
          planOrderNo: 'F250030-SP',
          productionOrderNo: 'DPD0010',
          feedingBatch: 'JAD0895A',
          performance: 'N38UH',
          coating: '磷化',
          feedingBatchAgain: 'DPD0010',
          productModel: 'R12.0*R24.3*29.5H',
          issueWeight: 11.318,
          quantity: 1210,
          product: 'N033BZ066S/白片',
          status: '完成',
          qualityJudgment: '通过主要检测'
        },
        {
          planOrderNo: 'F250030-SP',
          productionOrderNo: 'DPD0009',
          feedingBatch: '',
          performance: 'N38UH',
          coating: '磷化',
          feedingBatchAgain: 'DPD0009',
          productModel: 'R12.0*R24.3*29.5H-Long',
          issueWeight: 0,
          quantity: 1,
          product: 'N033BZ066S/白片升级版',
          status: '已取消',
          qualityJudgment: '待判定'
        },
        {
          planOrderNo: 'F250031-SP',
          productionOrderNo: 'DPD0011',
          feedingBatch: 'JAD0896B',
          performance: 'N40',
          coating: '镀锌',
          feedingBatchAgain: 'DPD0011',
          productModel: 'R10.0*R20.0*25.0H',
          issueWeight: 8.752,
          quantity: 850,
          product: 'N034BZ077S/黑片',
          status: '进行中',
          qualityJudgment: '待检测'
        },
        {
          planOrderNo: 'F250032-SP',
          productionOrderNo: 'DPD0012',
          feedingBatch: 'JAD0897C',
          performance: 'N42',
          coating: '镀铬',
          feedingBatchAgain: 'DPD0012',
          productModel: 'R15.0*R30.0*30.0H',
          issueWeight: 15.236,
          quantity: 620,
          product: 'N035BZ088S/黄片',
          status: '未开始',
          qualityJudgment: '未检测'
        },
        { planOrderNo: 'F250033-SP', productionOrderNo: 'DPD0013', feedingBatch: 'JAD0898D', performance: 'N35', coating: '磷化', feedingBatchAgain: 'DPD0013', productModel: 'R8.0*R18.0*22.0H', issueWeight: 5.621, quantity: 980, product: 'N036BZ099S/蓝片', status: '进行中', qualityJudgment: '检测中' },
        { planOrderNo: 'F250034-SP', productionOrderNo: 'DPD0014', feedingBatch: 'JAD0899E', performance: 'N38', coating: '镀锌', feedingBatchAgain: 'DPD0014', productModel: 'R20.0*R40.0*40.0H', issueWeight: 22.874, quantity: 450, product: 'N037BZ100S/红片', status: '完成', qualityJudgment: '通过' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' },
        { planOrderNo: 'F250035-SP', productionOrderNo: 'DPD0015', feedingBatch: 'JAD0900F', performance: 'N45', coating: '镀铬', feedingBatchAgain: 'DPD0015', productModel: 'R14.0*R28.0*28.0H', issueWeight: 14.325, quantity: 720, product: 'N038BZ101S/绿片', status: '未开始', qualityJudgment: '未检测' }
      ],
      
      // 质量信息数据
      qualityData: [
        {
          productCode: 'N033BZ066S',
          electroplatingNo: 'EP20230501',
          beforeChamferDate: '2023-05-01',
          beforeChamferChecker: '张三',
          afterChamferDate: '2023-05-02',
          afterChamferChecker: '李四',
          quantity: 1210,
          remarks: '符合标准'
        },
        {
          productCode: 'N033BZ066S',
          electroplatingNo: 'EP20230502',
          beforeChamferDate: '2023-05-03',
          beforeChamferChecker: '王五',
          afterChamferDate: '2023-05-04',
          afterChamferChecker: '赵六',
          quantity: 1,
          remarks: '已取消，未检测'
        },
        {
          productCode: 'N034BZ077S',
          electroplatingNo: 'EP20230503',
          beforeChamferDate: '2023-05-05',
          beforeChamferChecker: '孙七',
          afterChamferDate: '2023-05-06',
          afterChamferChecker: '周八',
          quantity: 850,
          remarks: '检测中'
        },
        {
          productCode: 'N035BZ088S',
          electroplatingNo: 'EP20230504',
          beforeChamferDate: '',
          beforeChamferChecker: '',
          afterChamferDate: '',
          afterChamferChecker: '',
          quantity: 620,
          remarks: '未开始'
        }
      ],
      
      // 搜索相关
      searchProductionNo: '',
      
      // 工单列表分页相关
      total: 0,
      pageSize: 20,
      currentPage: 1,
      selectedWorkOrders: [], // 选中的工单
      
      // 质量信息分页相关
      qualityTotal: 0,
      qualityPageSize: 20,
      qualityCurrentPage: 1,
      selectedQualityItems: [], // 选中的质量信息
      
      // 分页按钮文本
      prevText: '上一页',
      nextText: '下一页',
      
      // 加载状态
      loading: false,
      qualityLoading: false
    }
  },
  mounted() {
    // 初始化数据
    this.initTableData();
    this.initQualityData();
  },
  computed: {
    // 表头样式
    headerCellStyle() {
      return {
        backgroundColor: '#f5f7fa',
        color: '#303133',
        fontWeight: 'bold',
        height: '30px',
        padding: '0'
      };
    },
    
    // 工单列表过滤后的数据
    filteredTableData() {
      if (!this.searchProductionNo) {
        return this.tableData;
      }
      return this.tableData.filter(item => 
        item.productionOrderNo.toLowerCase().includes(this.searchProductionNo.toLowerCase())
      );
    },
    
    // 工单列表分页后的数据
    pagedTableData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredTableData.slice(startIndex, endIndex);
    },
    
    // 质量信息分页后的数据
    pagedQualityData() {
      const startIndex = (this.qualityCurrentPage - 1) * this.qualityPageSize;
      const endIndex = startIndex + this.qualityPageSize;
      return this.qualityData.slice(startIndex, endIndex);
    }
  },
  methods: {
    // 行样式
    rowStyle({ rowIndex }) {
      return {
        backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#fafafa',
        height: '30px',
        padding: '0'
      };
    },
    
    // 初始化工单列表数据
    initTableData() {
      this.loading = true;
      setTimeout(() => {
        this.total = this.tableData.length;
        console.log('工单列表数据初始化完成，总条数: ', this.total);
        this.loading = false;
      }, 500);
    },
    
    // 初始化质量信息数据
    initQualityData() {
      this.qualityLoading = true;
      setTimeout(() => {
        this.qualityTotal = this.qualityData.length;
        console.log('质量信息数据初始化完成，总条数: ', this.qualityTotal);
        this.qualityLoading = false;
      }, 500);
    },
    
    // 工单列表搜索处理
    handleSearch() {
      this.currentPage = 1;
      this.loading = true;
      setTimeout(() => {
        this.total = this.filteredTableData.length;
        this.loading = false;
      }, 500);
    },
    
    // 工单列表分页大小改变
    handleSizeChange(val) {
      const currentPosition = (this.currentPage - 1) * this.pageSize;
      this.pageSize = val;
      this.currentPage = Math.floor(currentPosition / this.pageSize) + 1;
      this.loadTableData();
    },
    
    // 工单列表页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadTableData();
    },
    
    // 加载工单列表数据
    loadTableData() {
      this.loading = true;
      setTimeout(() => {
        console.log(`加载工单列表第${this.currentPage}页，每页${this.pageSize}条数据`);
        this.loading = false;
      }, 300);
    },
    
    // 质量信息分页大小改变
    handleQualitySizeChange(val) {
      const currentPosition = (this.qualityCurrentPage - 1) * this.qualityPageSize;
      this.qualityPageSize = val;
      this.qualityCurrentPage = Math.floor(currentPosition / this.qualityPageSize) + 1;
      this.loadQualityData();
    },
    
    // 质量信息页码改变
    handleQualityCurrentChange(val) {
      this.qualityCurrentPage = val;
      this.loadQualityData();
    },
    
    // 加载质量信息数据
    loadQualityData() {
      this.qualityLoading = true;
      setTimeout(() => {
        console.log(`加载质量信息第${this.qualityCurrentPage}页，每页${this.qualityPageSize}条数据`);
        this.qualityLoading = false;
      }, 300);
    },
    
    // 工单选择变化
    handleWorkOrderSelectionChange(selection) {
      this.selectedWorkOrders = selection;
      console.log('选中的工单:', this.selectedWorkOrders);
    },
    
    // 质量信息选择变化
    handleQualitySelectionChange(selection) {
      this.selectedQualityItems = selection;
      console.log('选中的质量信息:', this.selectedQualityItems);
    },
    
    // 工单查看
    handleWorkOrderView(row) {
      console.log('查看工单:', row);
      // alert("这个")
      // 实际项目中这里会打开详情弹窗或跳转详情页
    },
    
    // 质量信息录入
    handleQualityInfoEntry(row) {
      console.log('录入质量信息:', row);
      // 实际项目中这里会打开录入表单弹窗
    },
    
    // 质量信息查看
    handleQualityView(row) {
      console.log('查看质量信息:', row);
      // 实际项目中这里会打开详情弹窗
    },
    
    // 质量信息编辑
    handleQualityEdit(row) {
      console.log('编辑质量信息:', row);
      // 实际项目中这里会打开编辑表单弹窗
    },
    
    // 质量信息删除
    handleQualityDelete(row) {
      console.log('删除质量信息:', row);
      // 实际项目中这里会显示确认删除弹窗
    }
  }
};
</script>

<style scoped>
.table-container {
  padding: 15px;
  margin: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(220, 12, 12, 0.05);
}

/* 两个表格区域的分隔 */
.work-order-section {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #0d2ed0;
}

.quality-info-section {
  margin-top: 5px;
}

/* 标题和搜索框区域 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

/* 标题样式 */
.table-title {
  margin: 0 0 20px 0;
  color: #cc1124;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
  width: 150px;
}

/* 搜索框样式 */
.search-container {
  width: 300px;
}

.custom-table {
  width: 100%;
  overflow: auto;
  margin-bottom: 15px;
}

/* 表格单元格样式 */
::v-deep .el-table th,
::v-deep .el-table td {
  padding: 0 5px;
  white-space: nowrap;
  text-overflow: clip;
  overflow: visible;
}

/* 操作按钮样式调整 */
::v-deep .el-button--text {
  padding: 2px 2px;
}

/* 分页容器 */
.pagination-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.pagination {
  text-align: right;
}
</style>